<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Ace Editor</title>
    <style>
        #editor {
            width: 100%;
            height: 500px;
        }
        /* 调整折叠箭头的大小和颜色 */
        .ace_gutter-cell .ace_fold-widget {
            width: 11px; /* 默认宽度 */
            height: 11px; /* 默认高度 */
            /*background-color: #ff5733; !* 设置背景颜色为橙色 *!*/
            border-radius: 1px; /* 可选：圆角效果 */
        }

        /* 设置折叠箭头的颜色 */
        .ace_gutter-cell .ace_fold-widget {
            background-color: #7f97f7; /* 设置折叠箭头的颜色 */
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-sql.js"></script>
</head>
<body>
    <div id="editor">
        SELECT (column1, column2, column3)
        FROM table_name
        WHERE condition;

        SELECT column1, column2, column3
        FROM table_name
        WHERE condition;
    </div>

    <script>
        var editor = ace.edit("editor");
        editor.session.setMode("ace/mode/sql");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        var Range = ace.require("ace/range").Range;
        var SqlMode = ace.require("ace/mode/sql").Mode;
        var BaseFoldMode = ace.require("ace/mode/folding/fold_mode").FoldMode;

        // 自定义 SQL 折叠规则
        var MySqlFoldMode = function() {
            this.foldingStartMarker = /\bSELECT\b|\(/i;
            this.foldingStopMarker = /\bFROM\b|\)/i;
        };

        MySqlFoldMode.prototype = Object.create(BaseFoldMode.prototype);
        MySqlFoldMode.prototype.constructor = MySqlFoldMode;

        MySqlFoldMode.prototype.getFoldWidget = function(session, foldStyle, row) {
            var line = session.getLine(row);
            if (this.foldingStartMarker.test(line)) {
                return "start";
            }
            if (this.foldingStopMarker.test(line)) {
                return "end";
            }
            return "";
        };

        MySqlFoldMode.prototype.getFoldWidgetRange = function(session, foldStyle, row) {
            var line = session.getLine(row);
            var match = line.match(this.foldingStartMarker);
            if (match) {
                var startColumn = match.index + match[0].length;
                var startRow = row;

                var maxRow = session.getLength();
                var endRow = row;
                var endColumn = line.length;

                var openBrackets = 0;

                while (++row < maxRow) {
                    line = session.getLine(row);
                    if (line.match(this.foldingStartMarker)) {
                        if (line.indexOf('(') !== -1) {
                            openBrackets++;
                        }
                    }
                    var stopMatch = line.match(this.foldingStopMarker);
                    if (stopMatch) {
                        if (stopMatch[0] === ')') {
                            if (openBrackets === 0) {
                                endRow = row;
                                endColumn = stopMatch.index;
                                break;
                            } else {
                                openBrackets--;
                            }
                        } else if (stopMatch[0].toUpperCase() === 'FROM' && openBrackets === 0) {
                            endRow = row;
                            endColumn = stopMatch.index;
                            break;
                        }
                    }
                }

                if (endRow > startRow) {
                    return new Range(startRow, startColumn, endRow, endColumn);
                }
            }
        };

        // 设置自定义折叠规则
        var sqlMode = new SqlMode();
        sqlMode.foldingRules = new MySqlFoldMode();
        editor.session.setMode(sqlMode);

        editor.session.setFoldStyle("markbegin");
    </script>
</body>
</html>
